<template>
  <div class="vip">
    <header class="top-nav-bar">
      <van-nav-bar class="header" fixed :border="false" @click-left="onClickLeft" :zIndex="200">
        <div class="header-title" slot="title">我的会员</div>
        <img class="goback" src="/static/icon/goback.png" slot="left" />
      </van-nav-bar>
    </header>
    <div class="top">
      <div class="vip-bg" :style="'background-image: url(\''+vipList[grade].img+'\');'">
        <img :src="head_img" />
        <p class="username" :v-html="name">{{ name }}</p>
        <p :class="'active-text-1'">  {{ grade == 0 ? "普通会员": grade == 1 ? "银卡会员": grade == 2 ? "金卡会员": "钻石会员"}} {{ grade != 0 ? "会员有效期："+exp_at.substring(0,10):""}}</p>
        <a href="/user/member/rule">会员规则 </a>
      </div>
      <div class="vip-name">
        <p :class="active.index==0 ? 'vip-name-active':''" @click="changeActive(0)">普通用户</p>
        <p :class="active.index==1 ? 'vip-name-active':''" @click="changeActive(1)">银卡会员</p>
        <p :class="active.index==2 ? 'vip-name-active':''" @click="changeActive(2)">金卡会员</p>
        <p :class="active.index==3 ? 'vip-name-active':''" @click="changeActive(3)">钻石会员</p>
        
      </div>
    </div>
    <div :class="'vip-info-'+active.index">
      <div class="vip-info-item vip-info-yidao">
        <img src="/static/icon/vip2/yidao.png" />
        <p class="info-name">线上全科医生咨询导医</p>
        <p class="info-price">{{ active.priceText.yidao }}</p>
      </div>
      <div class="vip-info-item vip-info-yiyuan">
        <img src="/static/icon/vip2/yiyuan.png" />
        <p class="info-name">医院专科预约</p>
        <p class="info-price">{{ active.priceText.yiyuan }}</p>
      </div>
      <div class="vip-info-item vip-info-hebao">
        <img src="/static/icon/vip2/hebao.png" />
        <p class="info-name">人工核保查询</p>
        <p class="info-price">{{ active.priceText.hebao }}</p>
      </div>
      <div class="vip-info-item vip-info-yimiao">
        <img src="/static/icon/vip2/yimiao.png" />
        <p class="info-name">疫苗(含HPV)</p>
        <p class="info-price">{{ active.priceText.yimiao }}</p>
      </div>
      <div class="vip-info-item vip-info-tijian">
        <img src="/static/icon/vip2/tijian.png" />
        <p class="info-name">各类体检</p>
        <p class="info-price">{{ active.priceText.tijian }}</p>
      </div>
      <div class="vip-info-item vip-info-yimei">
        <img src="/static/icon/vip2/yimei.png" />
        <p class="info-name">医美项目</p>
        <p class="info-price">{{ active.priceText.yimei }}</p>
      </div>
      <div class="vip-info-item vip-info-yongjin">
        <img src="/static/icon/vip2/yongjin.png" />
        <p class="info-name">佣金</p>
        <p class="info-price">{{ active.priceText.yongjin }}</p>
      </div>
      <div class="vip-info-item vip-info-jintie">
        <img src="/static/icon/vip2/jintie.png" />
        <p class="info-name">津贴</p>
        <p class="info-price">{{ active.priceText.jintie }}</p>
      </div>
      <div class="vip-info-item vip-info-jifen">
        <img src="/static/icon/vip2/jifen.png" />
        <p class="info-name">积分</p>
        <p class="info-price">{{ active.priceText.jifen }}</p>
      </div>
      <div class="vip-info-item vip-info-shengji">
        <img src="/static/icon/vip2/shengji.png" />
        <p class="info-name">如何成为</p>
        <p class="info-price">{{ active.priceText.shengji }}</p>
      </div>
    </div>
    <van-button class="vip-btn" type="primary" size="large" @click="PayMember"> {{ grade > 0 ? "续费会员":"成为会员" }}</van-button>
  </div>
</template>

<script>
import { paymember, domain } from './../../../api'
import { userinfo } from "./../../../libs/api_v1"
import axios from 'axios';
export default {
  components: {},
  data() {
    return {
      name:'',
      phone:'',
      ismember:false,
      itac:'',
      grade:0,
      item: '',
      cash:'',
      point:'',
      renew_at:'',
      exp_at:'',
      card_no:'',
      head_img:'',
      member:{
        text: '付费会员',
        to : '/pay/member',
        icon: 'redeem',
        exp_at:''
      },
      activeIndex: 0,
      currentIndex: 0,
      alreadyCount: 10,
      needCount: 23,
      dateSum: 234,
      avater: "/static/icon/self/default-avatar.png",
      username: "用户名称",
      current: {
        index: 0,
        name: "大众用户",
        icon: "/static/icon/vip2/vip-no-bg.png",
      },
      active: {
        index: 0,
        name: "大众用户",
        icon: "/static/icon/vip2/vip-no-bg.png",
        priceText: {
          yidao: "120元/次",
          yiyuan: "50元/次",
          hebao: "50元/次",
          yimiao: "等同或低于\n市场价",
          tijian: "等同或低于\n市场价",
          yimei: "等同或低于\n市场价",
          yongjin: "成为会员后获得",
          jintie: "成为会员后获得",
          jifen: "成为会员后获得",
          shengji: "注册即可"
        }
      },
      vipList: [
        {
          index: 0,
          name: "大众用户",
          img: "/static/icon/vip2/vip-no-bg.png",
          priceText: {
            yidao: "50元/次",
            yiyuan: "200元/次",
            hebao: "50元/次",
            yimiao: "等同或低于\n市场价",
            tijian: "等同或低于\n市场价",
            yimei: "等同或低于\n市场价",
            yongjin: "成为会员后获得",
            jintie: "成为会员后获得",
            jifen: "成为会员后获得",
            shengji: "注册即可"
          }
        },
        {
          index: 1,
          name: "银卡会员",
          img: "/static/icon/vip2/vip-silver-bg.png",
          priceText: {
            yidao: "前5次免费\n后续40元/次",
            yiyuan: "前5次免费\n后续160元/次",
            hebao: "前10次免费\n后续40元/次",
            yimiao: "10%优惠",
            tijian: "10%优惠",
            yimei: "10%优惠",
            yongjin: "所荐非会员用户\n消费额的10%",
            jintie: "下属会员佣金的\n10%",
            jifen: "积分1:1获得\n100积分=1元",
            shengji: "￥998/年"
          }
        },
        {
          index: 2,
          name: "金卡会员",
          img: "/static/icon/vip2/vip-gold-bg.png",
          priceText: {
            yidao: "前8次免费\n后续40元/次",
            yiyuan: "前8次免费\n后续160元/次",
            hebao: "前15次免费\n后续40元/次",
            yimiao: "11%优惠",
            tijian: "11%优惠",
            yimei: "11%优惠",
            yongjin: "所荐非会员用户\n消费额的13%",
            jintie: "下属会员佣金的\n30%",
            jifen: "积分1:1获得\n100积分=1元",
            shengji: "购买会员且推荐\n20名会员用户"
          }
        },
        {
          index: 3,
          name: "钻石会员",
          img: "/static/icon/vip2/vip-diamond-bg.png",
          priceText: {
            yidao: "前10次免费\n后续40元/次",
            yiyuan: "前10次免费\n后续160元/次",
            hebao: "前20次免费\n后续40元/次",
            yimiao: "12%优惠",
            tijian: "12%优惠",
            yimei: "12%优惠",
            yongjin: "所荐非会员用户\n消费额的15%",
            jintie: "下属会员佣金的\n50%",
            jifen: "积分1:1获得\n100积分=1元",
            shengji: "购买会员且推荐\n50名银卡会员用户"
          }
        }
      ]
    };
  },
  mounted() {
    
    for (var item of this.vipList){
      if (item.index === this.activeIndex) this.active = item;
      if (item.index === this.currentIndex){
          this.current.index = item.index;
          this.current.name = item.name;
          this.current.img = item.img;
      }
    }
  },
  created:function() {
    const setInfo = (index) => {
      this.current.index = index
      this.activeIndex = index;
      for (var item of this.vipList)
        if (item.index === this.activeIndex) this.active = item;
    }
    // setInfo(0)
    userinfo(this.$cookies.get("authtoken"))
    .then((resp)=>{
      var res = resp.data
      console.log(res)
      if(res.code==1){
        this.name = res.data.user.name
        this.itac = res.data.user.itac
        this.phone = res.data.user.phone
        this.head_img = res.data.user.head_img
        this.cash = res.data.member.cash
        this.point = res.data.member.point
        this.grade = res.data.member.grade
        this.renew_at = res.data.member.renew_at
        this.member.exp_at = res.data.member.exp_at
        this.exp_at = res.data.member.exp_at
        this.card_no = res.data.member.card_no
        setInfo(res.data.member.grade);
      }else{
        this.$dialog.alert({
            title: '提示',
            message: res.msg
          })
      }
    })
    .catch((err)=>{
      this.$dialog.alert({
            title: '提示',
            message: err
          })
    })
  },
  methods: {
    onClickLeft() {
      // this.$router.go(-1)
      // window.location.href = "/user/self"
      window.history.back()
      console.log("返回");
    },
    PayMember:function(){
      axios.post(domain+"/api/order/new/wechatpay?product_id=1&product_from=member&grade")
      .then((resp)=>{
        var res = resp.data
        if(res.code==1){
          window.location.href =  "/pay/mainland?order_no="+res.data+'&product_from=member&calluri=/user/member'
        }else{
          // this.$notify({ type: 'danger', message: res.msg });
          this.$dialog.alert({
            title: '提示',
            message: res.msg
          })
          console.log(res.err)
        }
      })
      .catch((err)=>{
        // this.$notify({ type: 'danger', message: err });
        This.$dialog.alert({
          title: '错误',
          message: err
        })
      })
    },
    changeActive(index) {
      if(index == 5){
        window.location.href = "/user/member/more"
      }
      this.current.index = index
      this.activeIndex = index;
      for (var item of this.vipList)
        if (item.index === this.activeIndex) this.active = item;
    }
  }
};
</script>

<style lang="scss" scoped>
.top-nav-bar {
  .header {
    background-color: #393939;
    .header-title {
      color: #fff;
      font-size: 15px;
      font-family: Microsoft YaHei;
    }
    .goback {
      left: -2px;
      top: 2px;
      position: relative;
      width: 8px;
      height: 13px;
    }
    .delete {
      right: -4px;
      top: 4px;
      position: relative;
      width: 15px;
      height: 18px;
    }
  }
}
</style>
<style lang="scss" scoped>
.vip {
  margin-top: 45px;
  p {
    margin: 0;
    line-height: 1em;
  }
  .top {
    position: relative;
    padding-top: 11px;
    // background-image: url("/static/icon/vip2/background-img.png");
    background-color: #393939;
    width: 320px;
    height: 137px;
    // background-size: 100% 100%;
    text-align: left;
    .vip-bg {
      
      clear: both;
      background-size: 100% 100%;
      width: 291px;
      height: 106px;
      margin: 0 15px;
      position: relative;
      img {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        margin-top: 32px;
        margin-left: 17px;
        float: left;
      }
      .username {
        font-size: 13px;
        font-family: SimSun;
        font-weight: bold;
        color: rgba(59, 59, 57, 1);
        float: left;
        padding-top: 37px;
        margin-left: 6px;
        width: 220px;
      }
      .active-text-0,
      .active-text-1,
      .active-text-2,
      .active-text-3 {
        font-size: 9px;
        font-family: SimSun;
        font-weight: bold;
        color: rgba(59, 59, 57, 1);
        float: left;
        padding-top: 7px;
        margin-left: 6px;
        width: 220px;
      }
      .active-text-0 {
        color: rgba(187, 121, 47, 1);
      }
      a {
        font-size: 9px;
        font-family: SimSun;
        font-weight: bold;
        color: rgba(175, 121, 55, 1);
        position: absolute;
        bottom: 6px;
        right: 8px;
      }
    }
    .vip-name {
      text-align: center;
      background-color: #565656;
      clear: both;
      height: 32px;
      width: 320px;
      p {
        font-size: 11px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        padding-top: 12px;
        float: left;
        width: 80px;
      }
      .vip-name-active {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
        padding-top: 10px;
      }
    }
  }
  .vip-info-0,
  .vip-info-1,
  .vip-info-2,
  .vip-info-3 {
    margin: 0 9px;
    .vip-info-item {
      border: 1px solid #f5f5f7;
      border-radius: 4px;
      margin-top: 12px;
      width: 300px;
      height: 54px;
      clear: both;
      img {
        margin-top: 10px;
        margin-left: 16px;
        float: left;
        width: 27px;
        height: auto;
      }
      .info-name {
        float: left;
        margin: 15px 0 0 37px;
        width: 77px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 15px;
      }
      .info-price {
        white-space: pre-wrap;
        float: left;
        margin: 15px 0 0 47px;
        width: 91px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 15px;
      }
    }
  }
  .vip-info-0 {
    .vip-info-yongjin .info-price {
      color: #06a44f;
    }
    .vip-info-jintie .info-price {
      color: #06a44f;
    }
    .vip-info-jifen .info-price {
      color: #06a44f;
    }
  }
  .vip-info-1,
  .vip-info-2,
  .vip-info-3 {
    .vip-info-yongjin .info-price {
      color: #06a44f;
    }
    .vip-info-jintie .info-price {
      color: #06a44f;
    }
  }
  .vip-btn {
    background-color: #06a44f;
    color: #ffffff;
    margin-top: 23px;
    height: 43px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 1em;
  }
}
</style>
